<template>
    <div>
        <el-form :inline="true" ref="queryForm">
            <el-form-item>
                <el-button type="primary" @click="add" icon="el-icon-plus">新建版本</el-button>
            </el-form-item>
        </el-form>
        <el-dialog
                title="新建版本"
                :visible.sync="dialogVisible"
                v-if="dialogVisible"
                width="40%">
            <el-form ref="form" :model="form" label-width="120px" :rules="rules">
                <el-form-item label="版本号" prop="version">
                    <el-input v-model="form.version" placeholder="请输入版本号"></el-input>
                </el-form-item>
                <el-form-item label="更新类型" prop="type">
                    <el-radio-group v-model="form.type">
                        <el-radio :label="key" v-for="(item, key) in updateKv">{{item}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="更新提示语" prop="notice">
                    <el-input type="textarea" v-model="form.notice" placeholder="请输入更新提示语"></el-input>
                </el-form-item>
                <el-form-item label="操作系统" prop="system">
                    <el-radio-group v-model="form.system">
                        <el-radio label="ANDROID"></el-radio>
                        <el-radio label="IOS"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="下载地址" prop="download">
                    <el-input v-model="form.download" placeholder="请输入下载地址"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">提 交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

  import { UPDATE_KV } from '@/utils/constant'
  import { add } from '@/api/version'

  export default {
    name: 'tool',
    data() {
      return {
        updateKv: UPDATE_KV,
        dialogVisible: false,
        loading: false,
        form: {},
        rules: {
          version: [
            { required: true, message: '版本号不能为空', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择更新类型', trigger: 'change' }
          ],
          notice: [
            { required: true, message: '更新提示语不能为空', trigger: 'blur' }
          ],
          system: [
            { required: true, message: '请选择操作系统', trigger: 'change' }
          ],
          download: [
            { required: true, message: '下载地址不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      add() {
        this.dialogVisible = true
        this.form = {}
      },
      submit() {
        this.$refs['form'].validate(async(valid) => {
          if (valid) {
            try {
              await add(this.form)
              this.dialogVisible = false
              this.$message.success('添加成功!')
              this.$emit('upload')
            } catch (e) {
              console.log(e)
            }
          } else {
            return false
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
